import React from 'react';
import {PopupTitleProps} from "@/components/k-view/popup/type";
import {Center, CloseIcon, HStack, Icon, Text, Pressable} from "@gluestack-ui/themed";

const PopupTitle = (props: PopupTitleProps) => {
    const {
        title,
        onRightClick,
        onLeftClick,
        renderLeft,
        renderRight,
        ...attrs
    } = props;

    return (
        <HStack
            position={"relative"}
            py={"$3"}
            px={"$4"}
            alignItems={"center"}
            borderBottomWidth={0.5}
            borderColor={"$borderLight500"}
            {...attrs}
        >
            <Pressable
                left={"$4"}
                position={"absolute"}
                zIndex={10}
                onPress={onLeftClick}
            >
                {renderLeft}
            </Pressable>
            <Text flex={1} size={"md"} textAlign={"center"} bold>{title}</Text>
            <Pressable
                right={"$4"}
                position={"absolute"}
                zIndex={10}
                onPress={onRightClick}
            >
                {renderRight ? renderRight : <Icon as={CloseIcon} w="$5" h="$5"/>}
            </Pressable>
        </HStack>
    );
};

export default PopupTitle;